Add WebP Converter with batch processing and quality slider#98
Conversation
Deploying jam-dev-utilities with
|
| Latest commit: |
79a3748
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1d101cd7.jam-dev-utilities.pages.dev |
| Branch Preview URL: | https://copilot-fix-8cc275e6-87f0-45.jam-dev-utilities.pages.dev |
peckz
changed the title
@squoosh/lib. Follow existing practices from the codebase. Keep it simple.
Co-authored-by: peckz <18050177+peckz@users.noreply.github.com>
Co-authored-by: peckz <18050177+peckz@users.noreply.github.com>
|
@copilot can we make sure that all components are from shadcn/ui package? Also, once images are converted, typography could be nicer, it's hard to get clear overview — be inspired by vercel 
|
…ts typography Co-authored-by: peckz <18050177+peckz@users.noreply.github.com>
... Updated to use proper shadcn/ui components: ✅ Slider: Replaced custom range input with shadcn/ui Slider component The conversion results now feature:
Commit: c7fedf1
Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot well, this looks quite good! 
This block where it says "1 successful" is quite weird since it's 50% and it's aligned to the left. Also, the selected files area could use a little bit of inspiration from websites like GitHub or Vercel; the content is misaligned and tiny. 
|
Co-authored-by: peckz <18050177+peckz@users.noreply.github.com>
... Improved the WebP converter UI based on your feedback: ✅ Added KB/MB reduction display - Now shows actual bytes saved alongside percentage (e.g., "77.4% reduction - 19.3 KB saved") ✅ Fixed conversion results layout - Replaced the awkward 50% width "1 successful" card with a full-width, centered design that looks much cleaner ✅ Enhanced selected files section - Redesigned with GitHub/Vercel-inspired professional file cards featuring:
The interface now provides a much cleaner overview and professional appearance. Commit: 0c5b6c4
Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot looks quite solid! Let's move the text "1 Image converted successfully" outside of the box; it could be smaller and formatted differently, as this information is not super important. Let's also add SEO text below the tool, so people can find it easily via Google. It might be a good idea to save quality value to local storage 
|
…save quality to localStorage Co-authored-by: peckz <18050177+peckz@users.noreply.github.com>
Addressed all feedback: ✅ Moved success text outside box - "1 Image converted successfully" now appears as smaller, less prominent text above the results card instead of inside it ✅ Added SEO content - Created comprehensive WebPConverterSEO component with usage instructions, benefits, FAQs, and related tools following the same pattern as other utilities ✅ Added localStorage persistence - Quality slider value is now automatically saved to localStorage and restored on page reload for better user experience The interface now has a cleaner layout with the conversion results focused on the actual metrics, while the success message is appropriately de-emphasized. Commit: 7c60d46 |
|
@copilot cool! I pushed one small commit, can you add one more thing, i would like to have a checkbox that says something like "automatically download after conversion" — this should be also save to local storage when is checked="true" we should trigger download instantly |
…erter Co-authored-by: peckz <18050177+peckz@users.noreply.github.com>
Added the auto-download checkbox feature! ✅ Key features implemented:
The feature integrates seamlessly with the existing download system and has been tested to work correctly. Commit: 4b13834 |
peckz
force-pushed
the
copilot/fix-8cc275e6-87f0-45f9-a265-2d6c199d224b
branch
from
ee1b8d0 to
79a3748
Compare
Implements a new WebP Converter utility that allows users to convert images to WebP format with batch processing capabilities and adjustable quality control.
🚀 Features
📁 Files Added/Modified
New Components:
pages/utilities/webp-converter.tsx- Main WebP converter pagecomponents/ds/MultiFileUploadComponent.tsx- Reusable multi-file upload componentcomponents/utils/webp-converter.utils.ts- Core conversion logic and utilitiescomponents/utils/webp-converter.utils.test.ts- Comprehensive test suiteModified:
components/utils/tools-list.ts- Added WebP converter to utilities list🛠️ Technical Implementation
Browser Compatibility: Initially attempted to use
@squoosh/libas requested, but it requires Node.js APIs (fs,worker_threads) that aren't available in browsers. Implemented a Canvas API-based solution that provides the same functionality while maintaining full browser compatibility.Design Consistency: Follows all existing patterns from the codebase:
📸 Screenshots
WebP Converter Interface:
Added to Utilities List:
✅ Testing
The WebP converter maintains the same high-quality, ad-free, open-source experience as all other jam.dev utilities while providing powerful image conversion capabilities for developers.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.